<template>
  <div class="container">
    <!-- 搜索组件 -->
    <card/>
    <!-- 正在热映 -->
    <div class="block-title-bar">
      <span class="block-title">正在热映</span>
      <!-- 点击向右的箭头 -->
      <div class="block-more">
        <a href="/pages/more/main">
          <span class="block-more-text">查看更多</span>
          <img class="block-more-icon" src="/static/images/fanhui-copy-copy.png">
        </a>
      </div>
    </div>
    <!-- 电影海报 -->
    <div class="swiper-home">
      <scroll-view scroll-x="true" scroll-with-animation="true" style="width:100%">
        <div class="movie-container">
          <ul>
            <li
              class="film-pic"
              v-for="(item, index) in subjects"
              :key="index"
              v-show="index < maxNum"
            >
              <a @click="particulars(item.id,item.original_title)">
                <img class="movieImg" :src="item.images.large" alt="海报">
                <div class="title_name">
                  <h5>{{item.original_title}}</h5>
                  <!--数组长度为5，共5次循环显示5颗星星-->
                  <div class="stars">
                    <!-- 全黄星星 -->
                    <img
                      class="stars_img"
                      v-for="(stars,sta) in item.rating.all_stars"
                      :key="sta"
                      src="/static/images/star_fill_whole.png"
                    >
                    <!-- 半黄星星 -->
                    <img
                      class="stars_img"
                      src="/static/images/star_fill_half.png"
                      v-if="item.rating.average>=index && item.rating.average%10!=0"
                    >
                    <!-- 全灰星星 -->
                    <img
                      class="stars_img"
                      src="/static/images/star_fill_none.png"
                      v-if="item.rating.averag>0"
                    >
                    <span class="stars_sp" v-if="item.rating.average==0">暂无评分</span>
                    <span class="stars_sp" v-else>{{item.rating.average}}</span>
                  </div>
                </div>
              </a>
            </li>
          </ul>
        </div>
      </scroll-view>
    </div>
    <!-- 即将上映 -->
    <div class="block-title-bar">
      <span class="block-title">即将上映</span>
      <!-- 点击向右的箭头 -->
      <div class="block-more">
        <a href="/pages/release/main">
          <span class="block-more-text">查看更多</span>
          <img class="block-more-icon" src="/static/images/fanhui-copy-copy.png">
        </a>
      </div>
    </div>
    <div class="upcoming">
      <scroll-view scroll-x="true" scroll-with-animation="true" style="width:100%">
        <upcoming/>
      </scroll-view>
    </div>
    <!-- 排行榜 -->
    <div class="block-title-bar">
      <span class="block-title">排行榜</span>
      <!-- 点击向右的箭头 -->
      <div class="block-more">
        <a href="/pages/rankin/main">
          <span class="block-more-text">查看更多</span>
          <img class="block-more-icon" src="/static/images/fanhui-copy-copy.png">
        </a>
      </div>
    </div>
    <div class="ranking">
      <scroll-view scroll-x="true" scroll-with-animation="true" style="width:100%">
        <ranking/>
      </scroll-view>
    </div>
  </div>
</template>

<script>
// import { In_theaters } from "../../api/top250.js";
import { mapGetters } from "vuex";
import card from "../../components/card";
import upcoming from "../../components/upcoming";
import ranking from "../../components/ranking";
export default {
  data() {
    return {
      maxNum: 8
    };
  },
  components: { card, upcoming, ranking },
  methods: {
    douban() {
      this.$store
        .dispatch("in_theaters")
        .then(data => {
          console.log("接口数据：" + JSON.stringify(data.subjects[0].genres));
          let list = data.subjects;
          list.forEach(item => {
            var average = item.rating.average;
            var all_stars = parseInt(average / 2);
            item.rating.all_stars = all_stars;
            // console.log(average);
          });
        })
        .catch(error => {
          console.log("接口请求失败：" + error);
        });
    },
    particulars(id, title) {
      wx.navigateTo({
        url: "/pages/details/main?id=" + id + "&title=" + title
      });
    }
  },
  created() {
    this.douban();
  },
  mounted() {},
  computed: {
    ...mapGetters(["subjects"])
  }
};
</script>

<style scoped>
.block-title-bar {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 30rpx 20rpx 0rpx 20rpx;
}

.block-title {
  color: #333333;
  font-size: 30rpx;
}
.block-more {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.block-more-text {
  color: #3fbe53;
  font-size: 24rpx;
}
.block-more-icon {
  width: 30rpx;
  height: 30rpx;
  padding-left: 6rpx;
}

/* 横向滚动图片 */
.swiper-home {
  width: 100%;
  height: 380rpx;
}
.movie-container {
  height: 380rpx;
  padding: 30rpx 20rpx 0rpx 20rpx;
}
.movie-container ul {
  display: flex;
}
.film-pic {
  flex: 0 0 23%;
  margin-right: 20rpx;
  height: 260rpx;
}
.film-pic img {
  width: 100%;
  height: 260rpx;
}
/* 影片名称 */
.title_name h5 {
  width: 170rpx;
  font-size: 24rpx;
  color: #000000;
  font-weight: bold;
  margin: 10rpx 0 5rpx 0;
  overflow: hidden; /*内容超出后隐藏*/
  text-overflow: ellipsis; /* 超出内容显示为省略号*/
  white-space: nowrap; /*文本不进行换行*/
}
.stars {
  height: 40rpx;
  display: flex;
  align-items: center;
}
.stars_sp {
  font-size: 20rpx;
  margin-left: 10rpx;
}
.stars_img {
  width: 25rpx !important;
  height: 25rpx !important;
}
/* 即将上映 */
.upcoming {
  width: 100%;
  height: 380rpx;
}
/* 排行榜 */
.ranking {
  width: 100%;
  height: 380rpx;
}
</style>
